import React from "react";
import {Card, Button, Flex} from "antd-mobile";
import "./currentReserveOrder.css";

class CurrentReserveOrder extends React.Component {
    render() {
        return (<div className={"current-reserve-order"}>
            <Card>
                <Card.Body>
                    <Flex>
                        <Flex.Item style={{flex: "1"}}>
                            <span className={"title"}>
                                当前预约订单
                            </span>
                        </Flex.Item>
                        <Flex.Item style={{flex: "2"}}>
                            <Flex direction={"column"}>
                                <Flex.Item style={{
                                    width: "100%"
                                }}>
                                    <span className={"lot-name"}>南方软件园</span>
                                    <span className={"lot-type"}>地下停车场</span>
                                </Flex.Item>
                                <Flex.Item style={{
                                    width: "100%"
                                }}>
                                    <span className={"address"}>
                                        详细地址
                                    </span>
                                </Flex.Item>
                            </Flex>

                        </Flex.Item>
                    </Flex>
                    <Flex direction={"row"}>
                        <Flex.Item className={"order-id"}>No:042</Flex.Item>
                        <Flex>
                            <Button size="small" className={"action-button"}>
                                进场
                            </Button>
                            <Button style={{
                                background: "#eee"
                            }} size="small" className={"action-button"}>
                                取消订单
                            </Button>
                        </Flex>
                    </Flex>
                </Card.Body>
            </Card>
        </div>);
    }
}

export default CurrentReserveOrder;